<template>
    <div class="home-singer">
        <h3>热门歌手</h3>
        <div class="wrapper" ref="wrapper">
           <ul class="content" ref="content">
              <li v-for="(item,index) in listData" :key="index" @click ="selectItem(Item)">
                 <div class="cover">
                    <van-image :src="item.singer_pic" radius="1rem"/>
                 </div>
                    <span>{{item.singer_name}}</span>
             </li>
         </ul>
        </div>
    </div>
</template>

<script>
import{betterScrollHorizontal} from '../../common/betterScroll.js';
export default {
    data(){
        return{
           listData:[],
        };
    },
    created (){
        this.getListData()
    },
      methods:{
        //获取到推荐歌单的数据
        getListData(){
            this.$request('get','/singer/list').then(res=>{
                console.log(res)
                if(res.result == 100){
                    this.listData = res.data.list.slice(0,12);
                }
                betterScrollHorizontal(
                    this,
                    this.$refs.wrapper,
                    this.$refs.content,
                    this.listData.length,
                    10
                );
            });
        },  
        selectItem(item){
            const singerId = item.singer_mid
            this.$router.push(`/singerhome/${singerId}`)
        }
      }, 
};
</script>
<style scoped>

    .wrapper{
        width: 100%;
        overflow: hidden;
    }

    ul.content li {
        display: inline-block;
        width: 10rem;
        vertical-align: top;
    }

    ul.content li * {
        margin: 0 0.1rem;
    }

     ul.content li > span {
        font-size: 12px;
        color: #54493b;
    }

</style>